<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>个人中心</title>
    <link rel="stylesheet" href="../css/personal_center_resetPwd.css">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="shortcut icon" href="../img/title/招聘求职.png" type="image/x-icon">
</head>
<body>
    <div id="app">
		<div class="header">
			<div class="header_left">
				<img src="../img/main/招聘会.png">
				<a href="./main.html">&nbsp;校园兼职管理</a>
			</div>
			<div class="header_center">
				<ul>
					<li><a href="./main.html">主页</a></li>
					<li><a href="./work_list.html">职位</a></li>
					<li><a href="./news.html">校园新闻</a></li>
				</ul>
			</div>
			<div class="header_right">
				<el-button @click="loginBtn" type="success" icon="el-icon-user-solid">登录</el-button>
				<el-button @click="registerBtn" type="success" icon="el-icon-takeaway-box">注册</el-button>
			</div>
		</div>
		<div class="section">
			<div class="section_1">个人中心</div>
			<div class="section_2">首页 > 个人中心 > 修改密码</div>
		</div>
		<div class="content">
			<div class="content_pagecking">
				<div class="content_left">
					<div class="content_left_top">
						<div class="block"><el-avatar :size="80" :src="userMsgList.user_image"></el-avatar></div>
					</div>
					<div class="content_left_bottom">
						<div class="content_left_bottom_item">
							<el-button @click="btn1" type="primary" plain style="width: 90%;height: 100%;" icon="el-icon-s-order">个人信息</el-button>
						</div>
						<div class="content_left_bottom_item">
							<el-button @click="btn2" type="primary"   style="width: 90%;height: 100%;" icon="el-icon-user-solid">修改密码</el-button>
						</div>
						<div class="content_left_bottom_item">
							<el-button @click="btn3" type="primary" plain  style="width: 90%;height: 100%;" icon="el-icon-s-custom">投递过的岗位</el-button>
						</div>
						<div class="content_left_bottom_item">
							<el-button @click="btn4" type="primary" plain  style="width: 90%;height: 100%;" icon="el-icon-s-tools">退出登录</el-button>
						</div>
					</div>
				</div>
				<div class="content_right">
					<div class="content_right_item">
						请输入原密码:<el-input id="pwd1" placeholder="请输入密码" v-model="lastPwd" show-password></el-input>
					</div>
					<div class="content_right_item">
						新密码:<el-input id="pwd2" placeholder="请输入密码" v-model="firstnewPwd" show-password></el-input>
					</div>
					<div class="content_right_item">
						重复输入新密码:<el-input id="pwd3" placeholder="请输入密码" v-model="secondnewPwd" show-password></el-input>
					</div>
					<div class="content_right_footer">
						<el-button @click="updatePwd" type="success" plain>提交</el-button>
					</div>
				</div>
			</div>
		</div>
    </div>
</body>
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="../js/jquery-3.6.1.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<script src="../js/after_landing.js"></script>
<script>
    const vm = new Vue({
        el : '#app',
        data(){
            return {
				userMsgList: [],
				lastPwd: '',
				firstnewPwd: '',
				secondnewPwd: '',
            }
        },
        created(){
			let username = getCookie("cookie_username")
			if (username !== null && username.length > 0) {
				axios.get('/users/' + username).then((resp) => {
					this.userMsgList = resp.data.data
					$('.header_center ul').append(
						`<li><a href="./personal_resume.html">简历</a></li>`)
					$('.header_center ul').append(`<li><a style="color: lawngreen;" href="./personal_center.html">个人中心</a></li>`)
					$('.header_right').empty()
					let url = this.userMsgList.user_image
					$(".header_right").append(
						`<img style="width: 7%;margin-right: 5px" src="${url}">${username}`);
					$(".header_right").append(
						`<a style="text-decoration: none;color: #77838e;margin-left: 5px" href="/logins/logout">注销</a>`
					);
				})
			} else {
				document.location.href = "login.html"
			}
        },
        methods:{
            loginBtn(){
            	window.location.replace("/pages/login.html");
            },
            registerBtn() {
            	document.location.href = "register.html"
            },
			btn1(){
				document.location.href = "personal_center.html"
			},
			btn2(){
				document.location.href = "personal_center_resetPwd.html"
			},
			btn3(){
				document.location.href = "personal_center_sendResumeMsg.html"
			},
			btn4(){
				document.location.href = "/logins/logout";
			},
			updatePwd(){
				if (this.lastPwd.length <= 0){
					this.$message.error('原密码不能为空')
				} else if (this.firstnewPwd.length <= 0){
					this.$message.error('新密码不能为空')
				} else if (this.secondnewPwd.length <= 0){
					this.$message.error('二次密码不能为空')
				} else if (this.lastPwd !== this.userMsgList.password){
					this.$message.error("原密码错误，请检查！")
					this.lastPwd = ''
				} else if (this.firstnewPwd !== this.secondnewPwd){
					this.$message.error("两次密码输入不相同，请重新输入")
				} else {
					let params = "?username=" + this.userMsgList.username
					params += "&password="+this.firstnewPwd
					axios.put("/users/personalUpdateUsePwd"+params).then((resp)=>{
						if (resp.data.data){
							this.$message.success("修改成功~")
							setTimeout(()=>{
								document.location.href = "/logins/logout1"
							},1000)
						} else {
							this.$message.error("服务器异常 联系管理员")
							setTimeout(()=>{
								document.location.href = "/logins/logout"
							})
						}
					})
				}
			}
        }
    })
</script>
</html>